<template>
    <el-card class="keyboard-nav-form">
      <template #header>
        <div class="card-header">
          <span>表单（使用方向键↑↓←→导航）</span>
        </div>
      </template>
  
      <el-form :model="formData" label-width="100px">
        <!-- 第一组输入框 -->
        <div class="form-section">
          <h3>第一组</h3>
          <el-row :gutter="20">
            <!-- 第一行 -->
            <el-col :span="6">
              <el-form-item label="输入框1">
                <el-input
                  v-model="formData.input1"
                  ref="input1"
                  @keydown.up.prevent
                  @keydown.down.prevent="focusElement('input5')"
                  @keydown.left.prevent
                  @keydown.right.prevent="focusElement('select1')"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="下拉框1">
                <el-select
                  v-model="formData.select1"
                  ref="select1"
                  class="full-width"
                  @keydown.up.prevent
                  @keydown.down.prevent="focusElement('select2')"
                  @keydown.left.prevent="focusElement('input1')"
                  @keydown.right.prevent="focusElement('date1')"
                >
                  <el-option label="选项1" value="1" />
                  <el-option label="选项2" value="2" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="日期1">
                <el-date-picker
                  v-model="formData.date1"
                  ref="date1"
                  type="date"
                  class="full-width"
                  :editable="true"
                  :clearable="false"
                  @keydown.up.prevent
                  @keydown.down.prevent="focusElement('date2')"
                  @keydown.left.prevent="focusElement('select1')"
                  @keydown.right.prevent="focusElement('input2')"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="输入框2">
                <el-input
                  v-model="formData.input2"
                  ref="input2"
                  @keydown.up.prevent
                  @keydown.down.prevent="focusElement('input6')"
                  @keydown.left.prevent="focusElement('date1')"
                  @keydown.right.prevent
                />
              </el-form-item>
            </el-col>
  
            <!-- 第二行 -->
            <el-col :span="6">
              <el-form-item label="输入框5">
                <el-input
                  v-model="formData.input5"
                  ref="input5"
                  @keydown.up.prevent="focusElement('input1')"
                  @keydown.down.prevent="focusGroup2('row0col0')"
                  @keydown.left.prevent
                  @keydown.right.prevent="focusElement('select2')"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="下拉框2">
                <el-select
                  v-model="formData.select2"
                  ref="select2"
                  class="full-width"
                  @keydown.up.prevent="focusElement('select1')"
                  @keydown.down.prevent="focusGroup2('row0col1')"
                  @keydown.left.prevent="focusElement('input5')"
                  @keydown.right.prevent="focusElement('date2')"
                >
                  <el-option label="选项A" value="A" />
                  <el-option label="选项B" value="B" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="日期2">
                <el-date-picker
                  v-model="formData.date2"
                  ref="date2"
                  type="date"
                  class="full-width"
                  :editable="true"
                  :clearable="false"
                  @keydown.up.prevent="focusElement('date1')"
                  @keydown.down.prevent="focusGroup2('row0col2')"
                  @keydown.left.prevent="focusElement('select2')"
                  @keydown.right.prevent="focusElement('input6')"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="输入框6">
                <el-input
                  v-model="formData.input6"
                  ref="input6"
                  @keydown.up.prevent="focusElement('input2')"
                  @keydown.down.prevent="focusGroup2('row0col3')"
                  @keydown.left.prevent="focusElement('date2')"
                  @keydown.right.prevent
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
  
        <!-- 第二组输入框 -->
        <div class="form-section">
          <div class="section-header">
            <h3>第二组</h3>
            <el-button type="primary" @click="addRow" :icon="Plus">添加行</el-button>
          </div>
          
          <div v-for="(_, rowIndex) in rows" :key="rowIndex" class="input-row">
            <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="输入项1">
                  <el-input
                    v-model="formData.group2[rowIndex].col0"
                    :ref="el => setGroup2Ref(`row${rowIndex}col0`, el)"
                    @keydown.up.prevent="handleGroup2Nav('up', rowIndex, 0)"
                    @keydown.down.prevent="handleGroup2Nav('down', rowIndex, 0)"
                    @keydown.left.prevent="handleGroup2Nav('left', rowIndex, 0)"
                    @keydown.right.prevent="handleGroup2Nav('right', rowIndex, 0)"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="输入项2">
                  <el-input
                    v-model="formData.group2[rowIndex].col1"
                    :ref="el => setGroup2Ref(`row${rowIndex}col1`, el)"
                    @keydown.up.prevent="handleGroup2Nav('up', rowIndex, 1)"
                    @keydown.down.prevent="handleGroup2Nav('down', rowIndex, 1)"
                    @keydown.left.prevent="handleGroup2Nav('left', rowIndex, 1)"
                    @keydown.right.prevent="handleGroup2Nav('right', rowIndex, 1)"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="输入项3">
                  <el-input
                    v-model="formData.group2[rowIndex].col2"
                    :ref="el => setGroup2Ref(`row${rowIndex}col2`, el)"
                    @keydown.up.prevent="handleGroup2Nav('up', rowIndex, 2)"
                    @keydown.down.prevent="handleGroup2Nav('down', rowIndex, 2)"
                    @keydown.left.prevent="handleGroup2Nav('left', rowIndex, 2)"
                    @keydown.right.prevent="handleGroup2Nav('right', rowIndex, 2)"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="输入项4">
                  <el-input
                    v-model="formData.group2[rowIndex].col3"
                    :ref="el => setGroup2Ref(`row${rowIndex}col3`, el)"
                    @keydown.up.prevent="handleGroup2Nav('up', rowIndex, 3)"
                    @keydown.down.prevent="handleGroup2Nav('down', rowIndex, 3)"
                    @keydown.left.prevent="handleGroup2Nav('left', rowIndex, 3)"
                    @keydown.right.prevent="handleGroup2Nav('right', rowIndex, 3)"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4" class="delete-col">
                <el-button 
                  @click="removeRow(rowIndex)" 
                  type="danger" 
                  :icon="Delete"
                  circle
                />
              </el-col>
            </el-row>
          </div>
        </div>
      </el-form>
    </el-card>
  </template>
  
  <script setup>
  import { ref, reactive } from 'vue'
  import { Plus, Delete } from '@element-plus/icons-vue'
  
  // 添加 refs 的定义
  const input1 = ref(null)
  const input2 = ref(null)
  const input5 = ref(null)
  const input6 = ref(null)
  const select1 = ref(null)
  const select2 = ref(null)
  const date1 = ref(null)
  const date2 = ref(null)
  
  // 表单数据
  const formData = reactive({
    // 第一组
    input1: '',
    select1: '',
    date1: '',
    input2: '',
    input5: '',
    select2: '',
    date2: '',
    input6: '',
    // 第二组
    group2: [createEmptyRow()]
  })
  
  // 第二组行数控制
  const rows = ref([0])
  
  // 第二组引用存储
  const group2Refs = reactive({})
  
  // 创建空行数据
  function createEmptyRow() {
    return {
      col0: '',
      col1: '',
      col2: '',
      col3: ''
    }
  }
  
  // 添加行
  function addRow() {
    formData.group2.push(createEmptyRow())
    rows.value.push(rows.value.length)
  }
  
  // 删除行
  function removeRow(index) {
    formData.group2.splice(index, 1)
    rows.value.pop()
    if (formData.group2.length === 0) {
      addRow()
    }
  }
  
  // 第一组元素聚焦
  function focusElement(refName) {
    const refs = {
      input1, input2, input5, input6,
      select1, select2,
      date1, date2
    }
    
    const el = refs[refName]?.value
    if (el) {
      if (el.focus) {
        el.focus()
      } else if (el.$el) {
        const input = el.$el.querySelector('input')
        if (input) input.focus()
      }
    }
  }
  
  // 设置第二组引用
  function setGroup2Ref(key, el) {
    if (el) {
      group2Refs[key] = el
    }
  }
  
  // 聚焦到第二组
  function focusGroup2(key) {
    const el = group2Refs[key]
    if (el) {
      if (el.focus) {
        el.focus()
      } else if (el.$el) {
        const input = el.$el.querySelector('input')
        if (input) input.focus()
      }
    }
  }
  
  // 处理第二组导航
  function handleGroup2Nav(direction, rowIndex, colIndex) {
    let nextRow = rowIndex
    let nextCol = colIndex
  
    switch (direction) {
      case 'up':
        if (rowIndex === 0) {
          // 返回第一组最后一行
          if (colIndex === 0) focusElement('input5')
          else if (colIndex === 1) focusElement('select2')
          else if (colIndex === 2) focusElement('date2')
          else if (colIndex === 3) focusElement('input6')
          return
        }
        nextRow = rowIndex - 1
        break
      case 'down':
        if (rowIndex < rows.value.length - 1) {
          nextRow = rowIndex + 1
        }
        break
      case 'left':
        if (colIndex > 0) {
          nextCol = colIndex - 1
        }
        break
      case 'right':
        if (colIndex < 3) {
          nextCol = colIndex + 1
        }
        break
    }
  
    focusGroup2(`row${nextRow}col${nextCol}`)
  }
  </script>
  
  <style scoped>
  .keyboard-nav-form {
    margin: 20px;
  }
  
  .form-section {
    margin-bottom: 30px;
  }
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .input-row {
    margin-bottom: 20px;
  }
  
  .delete-col {
    display: flex;
    align-items: center;
    padding-top: 20px;
  }
  
  .full-width {
    width: 100%;
  }
  
  :deep(.el-form-item__label) {
    font-weight: bold;
  }
  
  h3 {
    margin: 0 0 20px 0;
    color: #409EFF;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  </style> 